<template>
  <div class="risk">
    <div class="add" v-if="active == 1 || active == 2" @click="add()">新增</div>
    <van-search
      class="info_search input_text"
      v-model="value"
      @search="onSearch"
      @clear="clearSearch"
      placeholder="搜索"
    />
    <van-tabs v-model="active">
      <van-tab title="安全经费投入计划">
        <van-list
          style="margin: 10px"
          :finished="myFinished"
          v-model="myLoading"
          finished-text="没有更多了"
          @load="myOnLoad"
        >
          <van-cell
            style="margin-top: 10px"
            class="br-8"
            v-for="(item, index) in myList"
            :key="index"
          >
            <div class="warn_item">
              <div>
                <div class="warn_header">
                  <div>{{ item.DocName }}</div>
                </div>

                <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />年度：{{ item.Year }}
                  </van-col>
                </van-row>
                <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_user.png"
                      alt=""
                    />录入人：{{ item.CreateChnName }}
                  </van-col>
                </van-row>
                <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />录入时间：{{ item.CreateDate }}
                  </van-col>
                </van-row>
              </div>
              <file-list-read-only
                :attachs="item.SignAttach"
                :labelName="'签名文件:'"
                v-if="item.SignAttach"
              ></file-list-read-only>

              <van-divider />
              <div class="dep_btm">
                <div class="btm_item" @click="del(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_abolish.png"
                    alt=""
                  />
                  <div class="mr-10">删除</div>
                </div>
              </div>
              <div class="dep_btm" v-if="!item.SignAttach">
                <div class="btm_item" @click.stop="lookPdf(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_edit.png"
                    alt=""
                  />
                  <div class="mr-10">签名</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="安全经费记录">
        <van-dropdown-menu>
          <van-dropdown-item
            v-model="value1"
            :options="option1"
            @change="change_tab_left()"
          />
        </van-dropdown-menu>
        <van-list
          style="margin: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell
            style="margin-top: 10px"
            class="br-8"
            v-for="(item, index) in list"
            :key="index"
          >
            <div class="warn_item">
              <div @click="goDetail(item)">
                <div class="warn_header">
                  <div>{{ item.TypeName }}</div>
                </div>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />安全生产费用计划：{{ item.PlanContent }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />实际使用费用内容：{{ item.Content }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_receivable.png"
                      alt=""
                    />计划金额：{{ item.TotalPrice }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />使用时间：{{ item.CostDate }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_money.png"
                      alt=""
                    />使用金额：{{ item.Price }}</van-col
                  >
                </van-row>
                <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_user.png"
                      alt=""
                    />录入人：{{ item.CreateChnName }}
                  </van-col>
                </van-row>
                <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />录入时间：{{ item.CreateDate }}
                  </van-col>
                </van-row>

                <file-list-read-only
                :attachs="item.Attachs"
                :labelName="'发票或合同:'"
              ></file-list-read-only>

                <!-- <van-row gutter="20" class="dep_sort">
                  <van-col span="24">
                    <van-field label="签名文件：" class="input_text_block">
                      <template #input>
                        <div
                          v-for="(item, index) in item.Attachs"
                          :key="index"
                          class="wrapper space-between mb-10"
                        >
                          <a
                            style="color: blue"
                            @click.stop="goFile(item.AttCode)"
                          >
                            {{ item.AttName }}{{ item.AttExt }}</a
                          >
                        </div>
                      </template>
                    </van-field>
                  </van-col>
                </van-row> -->
              </div>

              <van-divider />
              <div class="dep_btm" v-if="item.Status != -1">
                <div class="btm_item" @click="PlanDelete(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_abolish.png"
                    alt=""
                  />
                  <div class="mr-10">删除</div>
                </div>
              </div>
              <div class="dep_btm" v-if="item.Status != -1">
                <div class="btm_item" @click="goToEdit(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_edit.png"
                    alt=""
                  />
                  <div class="mr-10">编辑</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
      <van-tab title="工商保险台账">
        <van-list
          style="margin: 10px"
          :finished="finished"
          v-model="loading"
          finished-text="没有更多了"
          @load="onThirdLoad"
        >
          <van-cell
            style="margin-top: 10px"
            class="br-8"
            v-for="(item, index) in thirdList"
            :key="index"
          >
            <div class="warn_item">
              <div @click="goThirdDetail(item)">
                <div class="warn_header">
                  <div>{{ item.ChnName }}</div>
                </div>

                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />身份证号：{{ item.CardNo }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />社保编号：{{ item.SocialSecurityNo }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />参保日期：{{ item.SocialSecurityDate }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_equ_type.png"
                      alt=""
                    />员工状态：{{ item.EmpStatusName }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />离职日期：{{ item.LeaveDate }}</van-col
                  >
                </van-row>
                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_receivable.png"
                      alt=""
                    />缴费基数：{{ item.BaseSalary }}</van-col
                  >
                </van-row>

                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_post.png"
                      alt=""
                    />录入人：{{ item.EditChnName }}</van-col
                  >
                </van-row>

                <van-row class="dep_sort">
                  <van-col span="24">
                    <img
                      src="@/assets/Images/AppIcon/icon_list_date.png"
                      alt=""
                    />录入时间：{{ item.EditDate }}</van-col
                  >
                </van-row>
              </div>

              <van-divider />
              <div class="dep_btm" v-if="item.Status != -1">
                <div class="btm_item" @click="injuryRecordDelete(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_abolish.png"
                    alt=""
                  />
                  <div class="mr-10">删除</div>
                </div>
              </div>
              <div class="dep_btm" v-if="item.Status != -1">
                <div class="btm_item" @click="goThirdEdit(item)">
                  <img
                    src="@/assets/Images/AppIcon/icon_list_edit.png"
                    alt=""
                  />
                  <div class="mr-10">编辑</div>
                </div>
              </div>
            </div>
          </van-cell>
        </van-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {
  list,
  SiteSafeCostRecordlist,
  Abolish,
  ParamsList,
  SiteInjuryRecord,
  Delete,
  costPlanDelete,
  SiteInjuryRecordDelete,
} from "@/api/SiteSafeCost";
import { formatDate, getDate, getTime } from "@/utils/getDate";
import FileListReadOnly from "../../../components/Attach/FileListReadOnly.vue";
export default {
  components: { FileListReadOnly },
  data() {
    return {
      active: 0,
      value: "",
      list: [],
      myList: [],
      myFilter: {
        page: 0,
        dataType: "List",
      },
      filter: {
        page: 0,
        dataType: "List",
        menuNo: "0201",
      },
      thirdFilter: {
        page: 0,
        dataType: "List",
      },
      thirdList: [],
      value1: "",
      option1: [],
      loading: false,
      finished: false,
      myLoading: false,
      myFinished: false,
    };
  },
  created() {
    // this.getList();
    // this.getMyList();

    var conditions1 = [];
    var conditions2 = [];
    if (this.value) {
      conditions1.push({
        Name: "Keywords",
        DisplayName: this.value,
        Value: this.value,
        Operator: "like",
        DataType: "String",
      });
    }

    if (this.value) {
      conditions2.push({
        Name: "Keywords",
        DisplayName: this.value,
        Value: this.value,
        Operator: "like",
        DataType: "String",
      });
    }

    if (this.value1) {
      conditions2.push({
        Name: "Type",
        Value: this.value1,
        Operator: "=",
        IsTemp: "false",
        DataType: "String",
      });
    }

    this.myFilter.page = 0;
    this.myFilter.conditions = JSON.stringify(conditions1);
    this.getMyList();
    this.filter.page = 0;
    this.filter.conditions = JSON.stringify(conditions2);
    this.getList();

    this.thirdFilter.page = 0;
    this.thirdFilter.conditions = JSON.stringify(conditions1);
    this.getThirdList();

    this.getParamsList();
  },
  methods: {
    onSearch() {
      var conditions1 = [];
      var conditions2 = [];
      if (this.value) {
        conditions1.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }

      if (this.value) {
        conditions2.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }

      if (this.value1) {
        conditions2.push({
          Name: "Type",
          Value: this.value1,
          Operator: "=",
          IsTemp: "false",
          DataType: "String",
        });
      }

      this.myFilter.page = 0;
      this.myFilter.conditions = JSON.stringify(conditions1);
      this.getMyList();
      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions2);
      this.getList();

      this.thirdFilter.page = 0;
      this.thirdFilter.conditions = JSON.stringify(conditions1);
      this.getThirdList();
    },
    clearSearch() {
      this.filter = {
        page: 0,
        dataType: "List",
      };
      this.myFilter = {
        page: 0,
        dataType: "List",
      };

      this.thirdFilter = {
        page: 0,
        dataType: "List",
      };

      this.value = "";
      this.getList();
      this.getMyList();
      this.getThirdList();
    },
    getMyList() {
      this.myLoading = true;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
        res.data.Data.forEach((item) => {
          item.CreateDate = getDate(item.CreateDate);
        });

        // for (var i = 0; i < res.data.Data.length; i++) {
        //   if (res.data.Data[i].SignAttach) {
        //     res.data.Data[i].SignAttach = JSON.parse(
        //       res.data.Data[i].SignAttach.replace(/'/g, '"')
        //     );
        //   }
        // }

        this.myList = res.data.Data;
        this.myFilter.page = res.data.PageIndex;
      });
    },
    getList() {
      this.loading = true;
      SiteSafeCostRecordlist(this.filter).then((res) => {
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        // for (var i = 0; i < res.data.Data.length; i++) {
        //   res.data.Data[i].Attachs = JSON.parse(
        //     res.data.Data[i].Attachs.replace(/'/g, '"')
        //   );
        // }

        res.data.Data.forEach((item) => {
          item.CreateDate = getDate(item.CreateDate);
          item.CostDate = getDate(item.CostDate);
        });

        this.list = res.data.Data;
        this.filter.page = res.data.PageIndex;
      });
    },

    getThirdList() {
      this.loading = true;
      SiteInjuryRecord(this.filter).then((res) => {
        this.loading = false;
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
        for (var i = 0; i < res.data.Data.length; i++) {
          // res.data.Data[i].Attachs = JSON.parse(
          //   res.data.Data[i].Attachs.replace(/'/g, '"')
          // );
          var item = res.data.Data[i];
          item.SocialSecurityDate = getDate(item.SocialSecurityDate);

          item.SocialSecurityDate = getDate(item.SocialSecurityDate);
          item.LeaveDate = getDate(item.LeaveDate);
          item.EditDate = getDate(item.EditDate);
          // getDate
        }

        this.thirdList = res.data.Data;
        this.thirdFilter.page = res.data.PageIndex;
      });
    },

    // GET /api/Params/GetParamsList?paramID=SafeCostPlanType HTTP/1.1
    getParamsList() {
      let params = {
        paramID: "SafeCostPlanType",
      };

      ParamsList(params).then((res) => {
        var option = [];

        option.push({
          text: "不限",
          value: "",
        });
        for (var i = 0; i < res.data.length; i++) {
          var item = res.data[i];
          option.push({
            text: item.Name,
            value: item.ID,
          });
        }

        this.option1 = option;
      });
    },

    myOnLoad() {
      this.myLoading = true;
      ++this.myFilter.page;
      list(this.myFilter).then((res) => {
        this.myLoading = false;
        this.myFilter.page = res.data.PageIndex;
        this.myList = this.myList.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.myFinished = true;
        }
      });
    },

    onLoad() {
      this.loading = true;
      ++this.filter.page;
      SiteSafeCostRecordlist(this.filter).then((res) => {
        this.loading = false;
        this.filter.page = res.data.PageIndex;
        this.list = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },

    onThirdLoad() {
      this.loading = true;
      ++this.thirdFilter.page;
      SiteInjuryRecord(this.filter).then((res) => {
        this.loading = false;
        this.thirdFilter.page = res.data.PageIndex;
        this.thirdList = this.list.concat(res.data.Data);
        if (!res.data.HasNextPage) {
          this.finished = true;
        }
      });
    },

    goDetail(item) {
      this.$router.push({
        path: "/SiteSafeCostRecordView",
        query: { id: item.ID },
      });
    },
    goToDetail(item) {
      this.$router.push({
        path: "/SiteappointmentEdit",
        query: { id: item.ID },
      });
    },

    goThirdEdit(item) {
      this.$router.push({
        path: "/SiteInjuryRecordDetail",
        query: { id: item.ID },
      });
    },

    goThirdDetail(item) {
      this.$router.push({
        path: "/SiteInjuryRecordView",
        query: { id: item.ID },
      });
    },

    goToEdit(item) {
      this.$router.push({
        path: "/SiteSafeCostRecordEdit",
        query: { id: item.ID },
      });
    },

    // 新增/编辑
    add() {
      console.log("active", this.active);

      if (this.active == 1) {
        this.$router.push({
          path: "/SiteSafeCostRecordAdd",
          query: { id: 0 },
        });
        //
      } else {
        this.$router.push({
          path: "/SiteInjuryRecordDetail",
          query: { id: 0 },
        });
      }
    },

    del(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条信息吗？",
        })
        .then(() => {
          Delete({ id })
            .then((res) => {
              // _this.change_tab_left();
              this.myFilter.page = 0;
              this.getMyList();
            })
            .catch((err) => {
              console.log("err", err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    PlanDelete(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条信息吗?？",
        })
        .then(() => {
          costPlanDelete({ id })
            .then((res) => {
              // _this.change_tab_left();
              this.change_tab_left();
            })
            .catch((err) => {
              console.log("err", err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    injuryRecordDelete(item) {
      const _this = this;
      const id = item.ID;
      this.$dialog
        .confirm({
          title: "询问",
          message: "您确定删除本条信息吗?？",
        })
        .then(() => {
          SiteInjuryRecordDelete({ id })
            .then((res) => {
              this.thirdFilter.page = 0;
              this.getThirdList();
            })
            .catch((err) => {
              console.log("err", err);
            });
        })
        .catch(() => {
          // on cancel
        });
    },

    change_tab_left() {
      console.log(this.value1);

      var conditions2 = [];
      if (this.value) {
        conditions2.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }
      // [{"DataType":"String","IsTemp":false,"Name":"Type","Operator":"\u003d","Value":"A"}]

      if (this.value1) {
        conditions2.push({
          Name: "Type",
          Value: this.value1,
          Operator: "=",
          IsTemp: "false",
          DataType: "String",
        });
      }

      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions2);
      this.getList();
    },

    // 附件详情
    goFile(attachCode) {
      this.$router.push("/Attach/AatachDetail?attCode=" + attachCode);
    },

    // 查看报告
    lookPdf(item, ids) {
      this.$router.push({
        name: "CheckReportDetail2",
        query: {
          url: process.env.VUE_APP_BASE_API + item.PdfAttach,
          TypeName: this.titleCode,
          isSignature: "SiteSafeCostPlanMain",
          IDS: ids,
          DocCode: item.Code,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.risk {
  background-color: #e8f1f8;
  .info_search {
    padding: 10px;
    border-radius: 5px !important;
    .van-field__control {
      background-color: #ffffff !important;
    }
  }
}
.all_dep {
  background-color: #ffffff;
}

.warn_item {
  /*margin-bottom: 10px;*/
  // padding: 10px 0 10px 10px;
  border-radius: 5px;
  position: relative;
}
.warn_header {
  display: flex;
  justify-content: space-between;
  position: relative;
  margin-bottom: 10px;
  .warn_tag {
    position: absolute;
    right: 0;
    top: 0;
    border-radius: 26.64rem 0 0 26.64rem;
  }
}
.dep_sort {
  // display: flex;
  // flex-wrap: wrap;
  // margin-bottom: 5px;
  img {
    height: 15px;
    width: 15px;
    margin-right: 5px;
  }
}
.dep_btm {
  display: flex;
  justify-content: flex-end;
  width: 30%;
  float: right;
  .btm_item {
    display: flex;
    align-items: center;
    img {
      height: 15px;
      width: 15px;
      margin-right: 5px;
    }
  }
}
</style>
